<template>
    <div>
        <van-pull-refresh v-model="discount.refreshing" @refresh="onRefresh" :disabled="discount.disabled">
            <van-sticky :offset-top="1" class="aui-bg-f">
                <van-row class="nine-nine aui-padded-10">
                    <van-col :span="2" class="aui-text-3 aui-text-center" @click="back">
                        <span class="iconfont icon-fanhui aui-ftn18"></span>
                    </van-col>
                    <van-col :span="20" class="aui-text-9 aui-text-center">
                        <div class="search" @click="fnOpenSearch()">
                            <i class="iconfont icon-sousuo"></i>
                            <span class="aui-ftn13 txt">搜索优惠券</span>
                        </div>
                    </van-col>
                    <van-col :span="2" class="aui-text-6" id="copy" data-clipboard-action="copy" :data-clipboard-text="discount_data.quan_url"  @click="fnCopyText('#copy')">
                        <img src="../../assets/discount/share.png" alt="">
                    </van-col>
                </van-row>
            </van-sticky>
            <div class="discount-detail" style="padding-bottom: 80px;">
                <div id="main">
                    <div id="aui-slide" class="slider_m">
                        <div class="slide-img">
                            <img :src="discount_data.pict_url" alt="">
                        </div>
                    </div>
                    <section class="detail aui-bg-f">
                        <div class="top">
                            <div class="tags aui-ftn12 aui-text-f">{{discount_data.user_type == '1' ? '天猫' : '淘宝'}}</div>
                            <div class="name aui-ftn16 aui-text-6 van-ellipsis" v-text="discount_data.title"></div>
                        </div>
                        <div class="md">
                            <div class="lt">
                                <div class="price">
                                    <div class="emb">￥</div>
                                    <div class="txt" v-text="discount_data.quanhou_jiage"></div>
                                </div>
                                <div class="juan-after aui-ftn12">
                                    券后价
                                </div>
                            </div>
                            <div class="juan aui-ftn12 aui-text-f aui-text-center">
                                {{discount_data.coupon_info_money | d_price}}元券
                            </div>
                        </div>
                        <div class="bb">
                            <div class="price">
                                <span>淘宝价</span> ￥{{totalPrice(discount_data.coupon_info_money, discount_data.quanhou_jiage)}}
                            </div>
                            <div class="aui-ftn12 aui-text-6">包邮</div>
                            <div class="aui-ftn12 aui-text-6">{{discount_data.volume}}人已买</div>
                        </div>
                    </section>
                    
                    <section class="tianjuan" v-if="discount.items.length > 0" v-cloak>
                        <div class="top-img">
                            <img src="../../assets/discount/tuijian.png" alt="" style="width: 100%">
                        </div>
                        <van-row class="main aui-bg-f">
                                <van-col span="12" class="juan-list" v-for="(item, index) in discount.items" :key="index" @click="getDetail(item.tao_id)">
                                    <div class="juan-list-main aui-bg-f">
                                        <div class="img">
                                            <img :src="item.pict_url" alt="">
                                        </div>
                                        <div class="juan-list-content">
                                            <div class="title aui-text-6 aui-ftn13 van-ellipsis" v-text="item.title"></div>
                                            <div class="bottom">
                                                <div class="price aui-ftn14">
                                                    ￥{{item.quanhou_jiage}}
                                                </div>
                                                <div class="after aui-text-9 aui-ftn12">￥{{totalPrice(item.coupon_info_money, item.quanhou_jiage)}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </van-col>
                            </van-row>
                    </section>
                </div>
                <div class="fixed aui-bg-f" id="fixed" style="bottom: 0;padding: 15px 10px;">
                    <div class="buy-btn aui-text-f aui-text-center aui-ftn16" @click="fnOpenWeb">领卷购买</div>
                </div>
            </div>
        </van-pull-refresh>
    </div>
</template>
<script>
    import "@/styles/discount.css"
    import Discount from '@/service/discount.js'
    export default {
        name: 'discount_detail',
        data () {
            return {
                slider_h: 350,
                discount_data: {coupon_info_money: '0.00'},
                cid: '',
                isTotal: false,
                discount: {
                    items: [],
                    refreshing: false,
                    disabled: false
                }
            }
        },
        computed: {
            key(){
                return this.$route.path + Math.random();
            }
        },
        filters: {
            d_price(price) {
                return price.substring(0, price.indexOf("."))
            }
        },
        mounted() {
            this.cid = this.$route.params.cid;
            this.getDetail( this.$route.params.id);
            this.initData();
        },
        methods: {
            totalPrice (price1, price2) {
                return parseFloat(price1) + parseFloat(price2);
            },
            fnOpenWeb () {
                if (this.discount_data.quan_url) location.href = this.discount_data.quan_url
            },
            getDetail (id) {
                Discount.fnGetDetail({id: id, isToken: false}).then(res => {
                    window.scrollTo(0,0)
                    if (res) {
                        this.discount_data = res;
                    } else {
                        this.isTotal = true;
                    }
                })
            },
            //打开搜索页面
            fnOpenSearch () {
                this.utils.fnOpenCommon(this, {name: 'discount_search', params: {cid: this.cid}})
            },
            // 图片预览
            fnPreview (img) {
                this.utils.fnPreviewPic([img])
            },
            initData () {
                Discount.fnGetTui({cid: this.cid, isToken: false, isLoading: true, type: this.$route.params.type}).then(res => {
                    if (res) {
                        this.discount.items = res.content ? res.content : [];
                    }
                })
                
            },
            fnLoadMore: function() {
                this.discount = {
                    disabled: false,
                    items: [],
                    refreshing: false
                }
                this.initData()
            },
            onRefresh() {
                setTimeout(() => {
                    this.getDetail();
                    this.fnLoadMore();
                }, 1000);
            },
            fnCopyText (el) {
                let vm = this;
                let clipboard = new this.clipboard(el);
                clipboard.on('success', function () {
                    vm.utils.fnMsg("复制成功")
                });
                clipboard.on('error', function () {
                    vm.utils.fnMsg("复制失败")
                });
            }
        }
    }
</script>
